<template>
    <tabar-box :fontSize="tabarData.fontSize" :backgroundColor="tabarData.backgroundColor">

        <tabar-item v-for="(item, index) in tabarData.list" :key="index"
            :selectColor="tabarData.selectColor"
            :pagePath="item.pagePath">


            <img slot="icon" :src="item.icon"  alt="icon"/>
            <img slot="select_icon" :src="item.selectIcon"  alt="select_icon">
            <div slot="tabar_title" v-text="item.title"></div>
        </tabar-item>
    </tabar-box>

</template>

<script>
import TabarBox from '../TaBar/Tabar_Box'
import TabarItem from '../TaBar/Tabar_Item'
export default {
    name:"TabarView",
    components:{
        TabarBox,
        TabarItem
    },
    data(){
        return{
            tabarData:{
                selectColor:"blue",
                fontSize:"16px",
                backgroundColor:"rgb(206, 203, 203)",
                list:[
                    {   pagePath:"/home",
                        icon:require('@/assets/taBarImg/index.png'),
                        selectIcon:require('@/assets/taBarImg/index2.png'),
                        title:'首页'
                    },
                    {
                        pagePath:"/about",
                        icon:require('@/assets/taBarImg/ShoppingMall.png'),
                        selectIcon:require('@/assets/taBarImg/ShoppingMall2.png'),
                        title:'关于'
                    },
                    {
                        pagePath:"/share",
                        icon:require('@/assets/taBarImg/Share.png'),
                        selectIcon:require('@/assets/taBarImg/Share2.png'),
                        title:'分享'
                    },
                    {
                        pagePath:"/news",
                        icon:require('@/assets/taBarImg/News.png'),
                        selectIcon:require('@/assets/taBarImg/News2.png'),
                        title:'消息'
                    },
                    {
                        pagePath:"/my",
                        icon:require('@/assets/taBarImg/My.png'),
                        selectIcon:require('@/assets/taBarImg/My2.png'),
                        title:'我的'
                    }
                ]
            }

        }
    }

}
</script>

<style>
</style>
